<?php get_header() ?>
<?php
    global $wpdb;
    $user = $wpdb->get_row("SELECT * FROM ap_painting_user WHERE user_id = {$_SESSION['user_id']}");
    ?>

	
<script type="text/javascript" src="<?php echo bloginfo('template_url'); ?>/js/jquery.blockUI.js"></script>
<script type="text/javascript" src="<?php echo bloginfo('template_url'); ?>/js/kinetic-v4.6.0.min.js"></script>
<script type="text/javascript" src="<?php echo bloginfo('template_url'); ?>/js/jquery.jcarousel.js"></script>
<link rel="stylesheet" type="text/css" href="<?php echo bloginfo('template_url'); ?>/css/skins/tango/skin.css" />
<script type="text/javascript" src="<?php echo bloginfo('template_url'); ?>/js/jqdialog/jqdialog.min.js"></script>
<link rel="stylesheet" type="text/css" href="<?php echo bloginfo('template_url'); ?>/js/jqdialog/jqdialog.css"/>
<link href="<?php echo bloginfo('template_url'); ?>/css/jquery-ui.css" type="text/css" rel="stylesheet" />
<script src="<?php echo bloginfo('template_url'); ?>/js/colorpicker/jquery.colorPicker.js" type="text/javascript"></script>
<link rel="stylesheet" href="<?php echo bloginfo('template_url'); ?>/js/colorpicker/colorPicker.css" type="text/css" />
<script type="text/javascript">

/* facebook share */
window.fbAsyncInit = function() {
 FB.init({appId: "370672979703477", status: true, cookie: true});
  // *** here is my code ***
  /*  if (typeof facebookInit == 'function') {
        facebookInit();
    } */
};

(function(d){
   var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
   if (d.getElementById(id)) {return;}
   js = d.createElement('script'); js.id = id; js.async = true;
   js.src = '//connect.facebook.net/en_US/all.js';
   ref.parentNode.insertBefore(js, ref);
 }(document));
 
 function fbshare() {
    if (editing) {
         $.jqDialog.alert("Bé phải lưu hình ảnh này lại! ",function(){});
    } else {
         
        url = jQuery('#latestimg').html();
        FB.ui({
          method: 'feed',
          link: 'https://www.facebook.com/CreamOvn',
          picture: url,
          name: 'Sloggi - Rực rỡ giáng sinh, tưng bưng năm mới',
          caption: '<?php echo $user->name ?>',
          description: 'Lòng rộn ràng bao yêu thương muốn nói.Nhờ cánh thiệp trao gửi những dấu yêu, Cho bốn mùa về ngập tràn hạnh phúc!'
        }, function(response){});


    }
}
var mask = new Image();
var maskm = new Image();
var maskb = new Image();
var tempImg = new Image();
function uploadfile(currele){
    mask = new Image();
    maskm = new Image();
    maskb = new Image();
    var src = base_url + "images/mask/" + currele.attr('alt') + ".png";
    var srcm = base_url + "images/mask/" + currele.attr('alt') + "m.png";
    var srcb = base_url + "images/mask/" + currele.attr('alt') + "b.png";
    mask.src = src;
    maskm.src = srcm;
    maskb.src = srcb;
}
/* END FB SHARE */
</script>

<div class="content tranhtai" >
    <div class="mainimg"> 

        <!-- CHO NAY DE LOAD ALBUM, IMAGE TE LE --> 
        <div id="albumfuck" ></div>

        <!--- CHO NAY DE VE LUNG TUNG --> 
        <div id="canvasHidden" style="display:none;"></div>
        <div id="canvasDiv"></div>
        <div id="canvasDiv2"></div>
        <!--[if IE]><script type="text/javascript" src="<?php echo bloginfo('template_url'); ?>/js/excanvas.js"></script><![endif]-->
        <script type="text/javascript" src="<?php echo bloginfo('template_url'); ?>/js/html5-canvas-drawing-app.js"></script>
        <script type="text/javascript" src="<?php echo bloginfo('template_url'); ?>/js/shape.js"></script>
        <script type="text/javascript">
            var editing = false;
            var iszoom = false;
            var outcanvas = false;
			var folderflag = true;
            $(document).ready(function() {
                prepareCanvas();
                curTool = "open";
                outlineImage.src = base_url + "images/background/coloring_1.jpg";
                $('#canvas').css('cursor', 'default');

            });
        </script>
    </div>
</div>
<div class="tt-control">
    <a href="#"><img src="<?php echo bloginfo('template_url'); ?>/img/btn-choilai.png" /></a>
    <a href="javascript:;" onclick="switch_layer();saveimg2db();"><img src="<?php echo bloginfo('template_url'); ?>/img/btn-hoantat.png" /></a>
    <a href="#"><img src="<?php echo bloginfo('template_url'); ?>/img/btn-album.png" /></a>
    <a href="#"><img src="<?php echo bloginfo('template_url'); ?>/img/btn-share.png" /></a>
</div>
<div class="tt-toolbar">
    <div class="tool-1" data="1">
        <div><a href="javascript:;"><img src="<?php echo bloginfo('template_url'); ?>/img/btn-hinhnen.png" /></a></div>
        <div>
            <ul id="mycarousel" class="jcarousel-skin-tango">
                <?php
                for ($i = 1; $i <= 7; $i++) {
                    $nameimg = "coloring_{$i}";
                    $img = "coloring_{$i}.jpg";
                ?>
                    <li><img alt="<?php echo $nameimg ?>" src="<?php echo bloginfo('template_url'); ?>/images/thumb/<?php echo $img ?>" width="55" height="50" alt="" /></li>
                <?php } ?>  
            </ul>
        </div>
    </div>
    <div class="tool-2" data="2">
        <div><a href="javascript:;"><img src="<?php echo bloginfo('template_url'); ?>/img/btn-taianh.png" /></a></div>
        <div>
            <ul id="mycarousel2" class="jcarousel-skin-tango">
                <?php
                for ($i = 1; $i <= 5; $i++) {
                    $nameimg = "mask{$i}";
                    $img = "mask{$i}.png";
                ?>
                    <li><img onclick="uploadfile(jQuery(this));$('#uploadimage').click();" alt="<?php echo $nameimg ?>" src="<?php echo bloginfo('template_url'); ?>/images/mask/<?php echo $img ?>" width="55" height="50" alt="" /></li>
                <?php } ?>  
            </ul>
            <form style="display:none;" id="shape_form"><input type='file' name='img' size='65' id='uploadimage' style="display:none;" /></form>
        </div>
    </div>
    <div class="tool-3" data="3">
        <div><a href="javascript:;"><img src="<?php echo bloginfo('template_url'); ?>/img/btn-trangtri.png" /></a></div>
        <div>
             <ul id="mycarousel3" class="jcarousel-skin-tango">
                <?php
                for ($i = 1; $i <= 20; $i++) {
                    $nameimg = "item{$i}";
                    $img = "item{$i}.png";
                ?>
                    <li><img alt="<?php echo $nameimg ?>" src="<?php echo bloginfo('template_url'); ?>/images/item/<?php echo $img ?>" width="55" height="50" alt="" /></li>
                <?php } ?>  
            </ul>
        </div>
    </div>
    <div class="tool-4" data="4">
        <div><a href="javascript:;"><img src="<?php echo bloginfo('template_url'); ?>/img/btn-nhaptext.png" /></a></div>
        <div>
            <div>
                <p class="font font-1 active" data="1">Font 1</p>
                <p class="font font-2" data="2">Font 2</p>
                <p class="font font-3" data="3">Font 3</p>
                <p class="font font-4" data="4">Font 4</p>
                <p class="font font-5" data="5">Font 5</p>
            </div>
            <p class="color">
                <span class="color-1" data="#fd020b"></span>
                <span class="color-2" data="#d7188c"></span>
                <span class="color-3" data="#077335"></span>
                <span class="color-4" data="#fcd230"></span>
                <span class="color-5" data="#01cafe"></span>
                <span class="color-6" data="#000000"></span>
            </p>
        </div>
    </div>
</div>
<script type="text/javascript">
    var toolChoose = 0;
    $('.tt-toolbar > div > div:first-child').live('click',function(){
        var curChoose = $(this).parent().attr('data');
        if(curChoose!=toolChoose){
             $('.tt-toolbar > div.tool-'+toolChoose+' > div:last-child').slideUp();
             $(this).next().slideDown();
             toolChoose = curChoose;
             if(toolChoose==1){
                curTool = 'hinhnen';
             }
             if(toolChoose==2){
                curTool = 'taianh';
             }
             if(toolChoose==3){
                curTool = 'trangtri';
             }
             if(toolChoose==4){
                curTool = 'nhaptext';
             }
             reset_choose_shape();
        }
    });
    $('.tt-toolbar .font').live('click',function(){
        $('.tt-toolbar .font').removeClass('active');
        $(this).addClass('active');

        if(!$('.input-text').hasClass('active')&&choose_shape==''){
            $('.input-text').addClass('active');
            $('.input-text textarea').val('Insert Text Here...');
            $('.input-text').fadeIn();
        }
        $('.input-text textarea').attr('class', $('.tt-toolbar .color span.active').attr('class').replace('active','')+' '+$('.tt-toolbar .font.active').attr('class').replace('active','').replace('font',''));
        if(choose_shape!=''){
            update_text();
            return;
        }
    });
    $('.tt-toolbar .color span').live('click',function(){
        shapeColor = $(this).attr('data');
        if(choose_shape!='' && (curTool=='taianh'||curTool=='nhaptext')){
            var shape = layer.get('.'+choose_shape)[0];
            shape.setFill(shapeColor);
            layer.draw();
        }
        curColor = convertHex($(this).val());
        $('.tt-toolbar .color span').removeClass('active');
        $(this).addClass('active');

        $('.font').parent().attr('class', 't'+$(this).attr('class').replace('active',''));
        if($('.input-text').hasClass('active')){
            $('.input-text textarea').attr('class', $('.tt-toolbar .color span.active').attr('class').replace('active','')+' '+$('.tt-toolbar .font.active').attr('class').replace('active','').replace('font',''));
        }
        if(choose_shape!=''){
            update_text();
            return;
        }
    });
    $('.input-text .btn-chen').live('click',function(){
        $('.input-text').fadeOut('fast',function(){ 
            update_text();
            $('.input-text').removeClass('active');
        });
    });
    $('.input-text .btn-huy').live('click',function(){
        $('.input-text').fadeOut('fast',function(){ 
            $('.input-text').removeClass('active');
        });
    });
    $(document).ready(function(){
        $('.tt-toolbar .color span.color-5').click();
        $('.tt-toolbar > div:first-child > div:first-child').click();
    });
</script>
<div class="input-text">
    <textarea></textarea>
    <a href="javascript:;" class="btn-chen">Chèn</a>
    <a href="javascript:;" class="btn-huy">Hủy</a>
</div>
<div id="latestimg" style="display: none"></div>
<input type="hidden" id="imgidhidden" value="">
<input type="hidden" id="layoutimg" value="">

<script type="text/javascript">
function reset_choose_shape(){
    choose_shape = '';
    layer.draw();
    paint = false;
    $('.input-text').fadeOut('fast',function(){ 
        $('.input-text').removeClass('active');
    });
}
function update_text(){
    var text = $('.input-text textarea').val();
    var font = $('.tt-toolbar .font.active').attr('class').replace('active','').replace('font','');
    if($.trim(font)=='font-1') font = 'UTMFleur';
    if($.trim(font)=='font-2') font = 'UTMAquarelle';
    if($.trim(font)=='font-3') font = 'UTMEdwardianKT';
    if($.trim(font)=='font-4') font = 'UTMEdwardianB';
    if($.trim(font)=='font-5') font = 'UVNSangSong';
    var color = $('.tt-toolbar .color span.active').attr('data');
    draw_text(text, font, color);
}
function switchgalery($k) {
    jQuery('.gallery').hide();
    jQuery('#exam_' + $k).fadeIn();
}

function loadfimg($albumid) {
    $.blockUI({css: {
            border: 'none',
            padding: '15px',
            backgroundColor: '#000',
            '-webkit-border-radius': '10px',
            '-moz-border-radius': '10px',
            opacity: .5,
            color: '#fff'
        }});
    jQuery.post("<?php echo site_url('/') ?>album/?detail=" + $albumid, function($data) {
        jQuery('#albumfuck').html($data);
        if (jQuery('#ftoolbarx').css('bottom') === '0px') {
            jQuery('#color_selector').css('z-index', '-9999');
        }
        switchimg('ele_0');
        folderflag = false; // disable folder button 
        $.unblockUI();
        function loadfimg($albumid) {
            jQuery.post("<?php echo site_url('/') ?>album/?detail=" + $albumid, function($data) {
                jQuery('#albumfuck').html($data);

            });
        }
    });
}
function saveimg2db() {
    var dataURL = canvas.toDataURL("image/png");
    $.blockUI({css: {
            border: 'none',
            padding: '15px',
            backgroundColor: '#000',
            '-webkit-border-radius': '10px',
            '-moz-border-radius': '10px',
            opacity: .5,
            color: '#fff'
        }});
    $.ajax({
        type: "POST",
        url: "<?php echo site_url() ?>/save-image",
        data: {
            imgBase64: dataURL
        }
    }).done(function(url) {
        jQuery('#latestimg').html(url);
        editing = false;
        $.unblockUI();
        $('#canvas').remove();
        prepareCanvas();
        curTool = "open";
        outlineImage.src = base_url + "images/background/coloring_1.jpg";
        $('#canvas').css('cursor', 'default');
    });
}
function saveImage(){
    $urllink = "<?php echo site_url() ?>/save-image";
    $reload = false;

    var dataURL = canvas.toDataURL("image/png");
    $.blockUI({css: {
            border: 'none',
            padding: '15px',
            backgroundColor: '#000',
            '-webkit-border-radius': '10px',
            '-moz-border-radius': '10px',
            opacity: .5,
            color: '#fff'
        }});
    $.ajax({
        type: "POST",
        url: $urllink,
        data: {
            imgBase64: dataURL,
            imgid: jQuery('#imgidhidden').val(),
            layoutimg : jQuery('#layoutimg').val()
        }
    }).done(function(url) {
        jQuery('#latestimg').html(url);
        $.unblockUI();
        editing = false;

    });
}
function loadexam() { 
    $.blockUI({css: {border: 'none', padding: '15px', backgroundColor: '#000', '-webkit-border-radius': '10px', '-moz-border-radius': '10px', opacity: .5, color: '#fff'}});
    
    if (jQuery('#albumfuck').css('display') === 'none') {
        jQuery('#canvasDiv').hide();
        jQuery.post('<?php echo site_url() ?>/album', function($data) {
            jQuery('#albumfuck').html($data);
            jQuery('#albumfuck').fadeIn();
            outcanvas = true;
            jQuery('#lialbum').addClass('active');
            $.unblockUI();
        });

    } else {
        jQuery('#albumfuck').hide();
        
        $('#canvas').remove();
        editing = false;
        prepareCanvas();
        outlineImage.src = base_url + "images/watermelon-duck-outline.png";
        $('.centerel img').click();
        $.unblockUI();
        
    }
}
function convertHex(hex) {
    hex = hex.replace('#', '');
    _r = parseInt(hex.substring(0, 2), 16);
    _g = parseInt(hex.substring(2, 4), 16);
    _b = parseInt(hex.substring(4, 6), 16);

    result = {
        r: _r,
        g: _g,
        b: _b
    }
    return result;
}
function draw(ev) {
    var img = new Image(),
    f = document.getElementById("uploadimage").files[0],
    url = window.URL || window.webkitURL,
    src = url.createObjectURL(f);

    img.src = src;
    img.onload = function() {
        reset_choose_shape();
        var maskWidth = mask.width;
        var maskHeight = mask.height;
        var img_width = img.width;
        var img_height = img.height;
        if(img.width!=maskWidth || img.height!=maskHeight){
            var radio_img_w = img.width / maskWidth;
            var radio_img_h = img.height / maskHeight;
            if(radio_img_w < radio_img_h){
                img_width = maskWidth;
                img_height = img.height / radio_img_w;
            }else{
                img_height = maskHeight;
                img_width = img.width / radio_img_h;
            }
        }
        var tempImg = merge_mask(img,mask,maskm,maskb,img_width,img_height);
        tempImg.onload = function(){
            draw_mask_image(img, mask, maskm, maskb, tempImg);
        }
        url.revokeObjectURL(src);
        document.getElementById('shape_form').reset();
    }
}
document.getElementById("uploadimage").addEventListener("change", draw, false);

jQuery(document).ready(function() {
    jQuery('#mycarousel').slimscroll({
        width: '105px',
        height: '240px',
        railVisible: true,
        alwaysVisible: true,
        railColor: '#ffffff',
        opacity: 1,
        color: '#288ed8'
    });
    jQuery('#mycarousel2').slimscroll({
        width: '105px',
        height: '240px',
        railVisible: true,
        alwaysVisible: true,
        railColor: '#ffffff',
        opacity: 1,
        color: '#288ed8'
    });
    jQuery('#mycarousel3').slimscroll({
        width: '105px',
        height: '240px',
        railVisible: true,
        alwaysVisible: true,
        railColor: '#ffffff',
        opacity: 1,
        color: '#288ed8'
    });
    jQuery('#mycarousel img').click(function() {
        var currele = jQuery(this);
        outlineImage.src = base_url + "images/background/" + jQuery(this).attr('alt') + ".jpg";
        outlineImage.onload = function() { 
            clearCanvasTransparent();
            context.drawImage(outlineImage, drawingAreaX, drawingAreaY, drawingAreaWidth, drawingAreaHeight);
            context.beginPath();
            context.rect(padding[3], padding[0], canvasWidth - (padding[1]+padding[3]), canvasHeight - (padding[0]+padding[2]));
            context.lineWidth = 2;
            context.strokeStyle = '#fffeff';
            context.stroke();
            colorLayerData = context.getImageData(0, 0, canvasWidth, canvasHeight);
            resourceLoaded(); 
            
        };
        jQuery('#layoutimg').val(base_url + "images/background/" + currele.attr('alt') + ".jpg");
    });
    jQuery('#mycarousel3 img').click(function() {
        var currele = jQuery(this);
        insert_image = true;
        var img = new Image(), src = base_url + "images/item/" + currele.attr('alt') + ".png";

        img.src = src;
        img.onload = function() {
            draw_insert_image(img);
        }
    });
    jQuery('#addimg').click(function() {
        folderflag = true;
            if (editing) {

                var currele = jQuery(this);
                // confirm dialog
                $.jqDialog.confirm("Bé có lưu hình ảnh đang vẽ lại ?",
                        function() {
                            result = true;
                            if (result === true) {
                                saveimg2db();
                            }
                        }, // callback function for 'YES' button
                        function() {
                            $('#canvas').remove();
                            editing = false;
                            prepareCanvas();
                            outlineImage.src = base_url + "images/watermelon-duck-outline.png";
                            $('.centerel img').click();
                        }      // callback function for 'NO' button
                );
            } else {
                $('#canvas').remove();
                editing = false;
                prepareCanvas();
                outlineImage.src = base_url + "images/watermelon-duck-outline.png";
                $('.centerel img').click();
            }
            jQuery('#albumfuck').hide();
            zoomIn = false;
            $('.ico-zoom').removeClass('is-zoom');
            $('.ico-zoom').attr('src', '<?php echo bloginfo('template_url'); ?>/img/icon_zoom.png');
        });

});
</script>

<?php get_footer() ?>